import React, { useEffect, useRef, useState } from 'react';
import { connect, Dispatch } from 'umi';

import { Divider, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';

import { ActionType, ProColumns } from '@ant-design/pro-table/lib/Table';
import { SorterResult } from 'antd/es/table/interface';

import { IOrganizeTableItem } from '@/pages/data.d';
import { ConnectState } from '@/models/connect';
import {getToken} from '@/utils/token'

interface AnalysisListProps {
  dispatch: Dispatch;
}

const AnalysisList: React.FC<AnalysisListProps> = (props) => {
  const [queryParams, setQueryParams] = useState<{}>({}); // 表格查询字段
  const [sorter, setSorter] = useState<string>('');
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<IOrganizeTableItem>[] = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '用户总数',
      dataIndex: 'usernum',
      hideInSearch: true,
    },
    {
      title: '订阅用户数',
      dataIndex: 'subscribenum',
      hideInSearch: true,
    },
    {
      title: '订阅率',
      dataIndex: 'subscriberate',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_: any, record: any) => (
        <>
          <a>编辑</a>
          <Divider type="vertical" />
          <a>删除</a>
        </>
      ),
    },
  ];

  const testDataSource = [
    {
      name: '在职人员',
      usernum: 100,
      subscribenum: 100,
      subscriberate: '50%',
    },
    {
      name: '在职员工学历分布',
      usernum: 100,
      subscribenum: 100,
      subscriberate: '50%',
    },
  ];

  return (
    <div>
      <ProTable<IOrganizeTableItem>
        actionRef={actionRef}
        rowKey="name"
        options={{
          fullScreen: true,
          reload: false,
          setting: true,
          density: true,
        }}
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<IOrganizeTableItem>;

          if (sorterResult.field) {
            setSorter(`${sorterResult.field}_${sorterResult.order}`);
          }
        }}
        params={{
          sorter,
        }}
        dataSource={testDataSource.filter((value) => {
          const keys = Object.keys(queryParams);
          if (keys.length === 0) {
            return true;
          } else {
            for (let i in keys) {
              const key = keys[i];
              if (value[key].toString().indexOf(queryParams[key]) === -1) {
                return false;
              }
            }
          }
          return true;
        })}
        onSubmit={(params) => {
          setQueryParams(params);
        }}
        columns={columns}
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              const token = getToken();
              // window.open('https://datav.zytest.net/#/project/12/widget');
              window.open(`http://172.21.17.38:5002/#/project/12/widget?token=${token}`);
              // window.open('http://172.21.17.38:5002/#/project/12/widget/10?token=eyJhbGciOiJIUzUxMiJ9.eyJ0b2tlbl9jcmVhdGVfdGltZSI6MTU5OTU0NzE1MjQ5MCwic3ViIjoiemhlbmd3ZWlqaWU5OSIsInRva2VuX3VzZXJfbmFtZSI6InpoZW5nd2VpamllOTkiLCJleHAiOjE1OTk1NDg5NTIsInRva2VuX3VzZXJfcGFzc3dvcmQiOiJMREFQIn0.9ZRKrBmtM263QiyE6z3iQ0f_gaHOGsjgufpU7G-m0LulugFnAJXBLGK3KM6WPwWvziI5JjWx0AHAnrbGUftG1Q');
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
        ]}
      />
    </div>
  );
};
export default connect(({}: ConnectState) => ({}))(AnalysisList);
